<template>
  <page-header-wrapper :breadcrumb="false" :title="currentList.list_name">
    <template v-slot:content>
      <div class="page-header-content">
        <div class="content">
          <div class="content-title">
            <a @click="jumpTo('/account/liveExamineDefined')">返回上一页</a>
          </div>
        </div>
      </div>
    </template>
    <a-button type="primary" @click="handleAdd" style="margin-bottom:15px">新增</a-button>
    <a-collapse v-model="activeKey" :bordered="false">
      <a-collapse-panel key="1" header="核选项">
        <a-table
          :columns="columns"
          :data-source="dataSourceNuclear"
          :rowClassName="rowClassName"
          :pagination="false"
          :loading="tableLoading"
        >
          <span slot="is_delete" slot-scope="is_delete">
            <a-tag v-if="is_delete===1" color="green">
              正常
            </a-tag>
            <a-tag v-else color="red">
              禁用
            </a-tag>
          </span>
          <template slot="action" slot-scope="text, record">
            <a @click="handleInfo(record)">详情</a>
            <a-divider type="vertical" />
            <a-popconfirm
              v-if="dataSourceNuclear.length"
              title="确定操作?"
              okText="确定"
              cancelText="取消"
              @confirm="() => onDisabled(record,1)"
            >
              <a href="javascript:;" v-if="record.is_delete===1" >禁用</a>
              <a href="javascript:;" v-else >恢复</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm
              v-if="dataSourceNuclear.length"
              title="确定操作?"
              okText="确定"
              cancelText="取消"
              @confirm="() => onDisabled(record,0)"
            >
              <a href="javascript:;" style="color:red">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="评分项">
        <a-table
          :columns="columns"
          :data-source="dataSourceJudge"
          :rowClassName="rowClassName"
          :pagination="false"
          :loading="tableLoading"
        >
          <span slot="is_delete" slot-scope="is_delete">
            <a-tag v-if="is_delete===1" color="green">
              正常
            </a-tag>
            <a-tag v-else color="red">
              禁用
            </a-tag>
          </span>
          <template slot="action" slot-scope="text, record">
            <a @click="handleInfo(record)">详情</a>
            <a-divider type="vertical" />
            <a-popconfirm
              v-if="dataSourceNuclear.length"
              title="确定操作?"
              okText="确定"
              cancelText="取消"
              @confirm="() => onDisabled(record,1)"
            >
              <a href="javascript:;" v-if="record.is_delete===1" >禁用</a>
              <a href="javascript:;" v-else >恢复</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a-popconfirm
              v-if="dataSourceNuclear.length"
              title="确定操作?"
              okText="确定"
              cancelText="取消"
              @confirm="() => onDisabled(record,0)"
            >
              <a href="javascript:;" style="color:red">删除</a>
            </a-popconfirm>
          </template>
        </a-table>
      </a-collapse-panel>
    </a-collapse>
    <a-modal
      title="操作详情"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
      :okText="okText"
      cancelText="取消"
      v-if="visible"
      :maskClosable="false"
    >
      <a-steps :current="currentStep" size="small" v-show="modalStatus==false">
        <a-step title="选择类型"></a-step>
        <a-step title="编辑内容"></a-step>
      </a-steps>
      <a-form-model
        ref="showData"
        :model="showData"
        :label-col="{span: 5}"
        :wrapper-col="{span: 16}"
        :rules="rules"
        style="margin-top:20px">
        <a-form-model-item label="选项类型" prop="list_child_type" v-show="currentStep==0">
          <a-select v-model="showData.list_child_type">
            <a-select-option :value="0">
              核选项
            </a-select-option>
            <a-select-option :value="1">
              评分项
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="小项名称" prop="list_child_name" v-if="currentStep==1">
          <a-input v-model="showData.list_child_name"></a-input>
        </a-form-model-item>
        <a-form-model-item label="分数" prop="list_child_score" v-if="currentStep==1&&showData.list_child_type==1">
          <a-input v-model="showData.list_child_score"></a-input>
        </a-form-model-item>
        <a-form-model-item label="权重" prop="weight" v-if="currentStep==1">
          <a-input v-model="showData.weight"></a-input>
        </a-form-model-item>
        <a-form-model-item label="选项含义" prop="list_child_desc" v-if="currentStep==1&&showData.list_child_type==0">
          <a-input v-model="showData.list_child_desc"></a-input>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { mapState } from 'vuex'
import { listChildFinds, listChildCreat, listChildEdit } from '@/api/liveExamine'
export default {
  data () {
    return {
      okText: '',
      modalStatus: Boolean, // true为修改，false为新增
      currentStep: 0,
      confirmLoading: false,
      visible: false,
      tableLoading: false,
      activeKey: ['1'],
      showData: {},
      dataSourceNuclear: [],
      dataSourceJudge: [],
      columns: [
        {
          title: '小项名称',
          dataIndex: 'list_child_name',
          key: 'list_child_name'
        },
        {
          title: '顺序权重',
          dataIndex: 'weight',
          key: 'weight'
        },
        {
          title: '创建时间',
          dataIndex: 'create_time',
          key: 'create_time'
        },
        {
          title: '创建人',
          dataIndex: 'creator_name',
          key: 'creator_name'
        },
        {
          title: '状态',
          dataIndex: 'is_delete',
          key: 'is_delete',
          scopedSlots: { customRender: 'is_delete' },
          width: '8%'
        },
        {
          title: '操作',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
          key: 'action',
          fixed: 'right'
        }
      ],
      rules: {
        list_child_type: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        list_child_score: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        weight: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        list_child_desc: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ],
        list_child_name: [
          { required: true, message: '内容不可为空', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    jumpTo (router) {
      this.$router.push(router)
      // this.$router.go(-1)
    },
    rowClassName () {
      return 'rowClass'
    },
    getTableData () {
      this.tableLoading = true
      var fd = new FormData()
      fd.append('list_id', this.currentList.list_id)
      listChildFinds(fd).then(res => {
        this.dataSourceNuclear = res.result.optionList
        this.dataSourceJudge = res.result.scoreList
        this.tableLoading = false
      }).catch(err => {
        this.$notification['error']({
          message: err.code,
          description: err.message
        })
      })
    },
    handleCancel () {
      this.visible = false
    },
    handleAdd () {
      this.showData = {}
      this.modalStatus = false
      this.currentStep = 0
      this.okText = '下一步'
      this.visible = true
    },
    handleInfo (record) {
      this.showData = JSON.parse(JSON.stringify(record)) // 深拷贝
      this.currentStep = 1
      this.modalStatus = true
      this.okText = '保存'
      this.visible = true
    },
    handleOk () {
      if (this.modalStatus === false) {
        if (this.currentStep === 0) {
          if (this.showData.list_child_type === undefined) {
            this.$message.error('请选择选项类型')
            return
          }
          this.currentStep += 1
          this.okText = '保存'
        } else {
          this.$refs.showData.validate(valid => {
            if (!valid) {
              return false
            } else {
              this.confirmLoading = true
              this.showData['list_id'] = this.currentList.list_id
              listChildCreat(this.showData).then(res => {
                if (res.code === 200) {
                  this.$notification['success']({
                    message: 'Success',
                    description: '新增成功'
                  })
                  this.getTableData()
                  this.confirmLoading = false
                  this.visible = false
                } else {
                  this.$notification['error']({
                    message: res.code,
                    description: res.message
                  })
                  this.confirmLoading = false
                }
              }).catch(err => {
                this.$notification['error']({
                  message: err.code,
                  description: err.message
                })
                this.confirmLoading = false
              })
            }
          })
        }
      } else {
        this.$refs.showData.validate(valid => {
          if (!valid) {
            return false
          } else {
            this.confirmLoading = true
            // eslint-disable-next-line prefer-const
            let fd = new FormData()
            fd.append('list_child_id', this.showData.list_child_id)
            fd.append('list_child_name', this.showData.list_child_name)
            // eslint-disable-next-line eqeqeq
            if (this.showData.list_child_type == 0) {
              fd.append('list_child_desc', this.showData.list_child_desc)
            } else {
              fd.append('list_child_score', this.showData.list_child_score)
            }
            fd.append('weight', this.showData.weight)
            listChildEdit(fd).then(res => {
              if (res.code === 200) {
                this.$notification['success']({
                  message: 'Success',
                  description: '修改成功'
                })
                this.confirmLoading = false
                this.getTableData()
                this.visible = false
              } else {
                this.$notification['error']({
                  message: res.code,
                  description: res.message
                })
                this.confirmLoading = false
              }
            }).catch(err => {
              this.$notification['error']({
                message: err.code,
                description: err.message
              })
              this.confirmLoading = false
            })
          }
        })
      }
    },
    onDisabled (data, action) {
      var fd = new FormData()
      if (action === 0) {
        fd.append('is_delete', 0)
      } else {
        if (data.is_delete === 1) {
          fd.append('is_delete', 2)
        } else {
          fd.append('is_delete', 1)
        }
      }
      fd.append('list_child_id', data.list_child_id)
      listChildEdit(fd).then(res => {
        // console.log(res.data)
        if (res.code === 200) {
          this.$notification['success']({
            message: 'Success',
            description: '操作成功'
          })
          this.getTableData()
        } else {
          this.$notification['error']({
            message: 'Error',
            description: res.message
          })
        }
      }).catch(err => {
          this.$notification['error']({
            message: 'Error',
            description: err.message
          })
      })
    }
  },
  computed: {
    ...mapState({
      currentList: state => state.user.currentList
    })
  },
  created () {
    this.$store.commit('SET_CURRENTLIST', JSON.parse(sessionStorage.list))
    this.getTableData()
  }
}
</script>

<style lang="less" scoped>
/deep/ .rowClass{
  background-color: #fff;
}
/deep/ .ant-table-thead > tr > th {
  background: #fafafa !important;
}
</style>
